<!-- 检查详情 -->
<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block style="color: #777777;font-size: 48rpx;" slot="content">检查详情</block>
		</cu-custom>
		<view class="content">
			<ul>
				<li>
					<text>任务名称：{{name}}</text>
				</li>
				<li>
					<text>检查人员：{{inspectPersonName}}</text>
				</li>
				<li>
					<text>业主名称：{{inspectEnterpriseName}}</text>
				</li>
				<li>
					<text>检查部门：{{inspectPersonName}}</text>
				</li>
				<li>
					<text>任务状态：{{inspectTpe}}</text>
				</li>
			</ul>
		</view>

		<view>
			<view class="zj">
				<view>检查设备：已完成 <text class="title_big">{{xwc}}</text> 个 / 需要完成 <text class="title_big">{{ywc}}</text> 个</view>
				<uni-icons @click="close" class="close" :type="iconStyle" size="16"></uni-icons>
				
			</view>
			<view :style="pShow ? '' : 'display:none;'" class="detail">
				<view v-for="(item,index) in dlist" :key="index">
					<text>检测项目A 个</text>
					<button class="my-btn cu-btn bg-system-orange shadow uni-btn-small"
						@click="jc(item.id)">开始检查</button>
				</view>
			</view>
		</view>

		<view v-if="otype===0" class="padding flex flex-direction">
			<button class="cu-btn margin-tb-sm lg my-btn" @tap="qrrw">确认任务</button>
		</view>

		<view v-if="otype===1" class="padding flex flex-direction">
			<button class="cu-btn margin-tb-sm lg my-btn" @tap="kszx">开始执行</button>
		</view>

		<view v-if="otype===2" class="padding flex flex-direction">
			<button class="cu-btn margin-tb-sm lg my-btn" @tap="js">结束本次维保任务/结束维保任务</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sbr: '',
				tel: '',
				name: '',
				enterprise: '',
				address: '',
				time: '',
				pShow: false,
				iconStyle: 'top',
				otype: 0,
				ucId: '',
				inspectPersonName: '',
				inspectEnterpriseName: '',
				inspectTpe: '未进行', //未进行 进行中 已完成
				dlist: [],
				xwc:0,
				ywc:0
			}
		},
		onLoad(option) {
			// 封装参数
			this.ucId = option.ucId
			this.xq()
		},
		methods: {
			qrrw() {

			},
			kszx() {

			},
			js() {

			},
			jc(id) {
				uni.navigateTo({
					url: '/jcqy/jcxm/jcxm?ucId=' + id
				})
			},
			see_detail(index) {
				console.info("index:" + index)
			},
			close() {
				this.pShow = !this.pShow;
				this.iconStyle = this.pShow ? 'bottom' : 'top'
			},
			xq() {

				let that = this
				// 请求数据
				let app = getApp()
				app.globalData.request({
					url: 'wx/inspect/' + that.ucId,
					method: "GET"
				}).then(function(res) {
					console.info(res)
					that.inspectPersonName = res.data.data.data.inspectPersonName
					that.inspectEnterpriseName = res.data.data.data.inspectEnterpriseName
					that.inspectPersonName = res.data.data.data.inspectPersonName
					that.otype = res.data.data.data.status
					if (res.data.data.data.status == 1) {
						that.inspectTpe = '进行中'
					} else if (res.data.data.data.status == 2) {
						that.inspectTpe = '已完成'
					} else{
							that.inspectTpe = '未开始'
					}
				}).catch(function(e) {
					console.error(e)
				})
			}
		}
	}
</script>

<style scoped>
	page {
		width: 100vw;
	}

	.content {
		margin-top: 24rpx;
		background-color: #FFFFFF;
	}

	ul li {
		list-style: none;
		margin: 0;
		padding: 0;
		margin-left: 24rpx;
		position: relative;
	}

	li text {
		font-size: 24rpx;
		color: #777777;
		line-height: 94rpx;
	}

	li::after {
		content: '';
		position: absolute;
		left: 2rpx;
		bottom: 0;
		right: 2rpx;
		height: 1px;
		background-color: #dcdcdc;
	}

	.zj {
		display: flex;
		justify-content: space-around;
		margin-top: 24rpx;
		background: #FFFFFF;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 24rpx;
		color: #333333;
	}

	.detail {
		display: flex;
		flex-direction: column;

	}

	.detail text {
		line-height: 105rpx;
		font-size: 21rpx;
	}

	.detail button {
		float: right;
		width: 140rpx;
		height: 50rpx;
		background: #FABD50;
		box-shadow: 0 4px 14px 0 rgba(250, 189, 80, 0.50);
		border-radius: 6px;
		border-radius: 6px;

		font-size: 21rpx;
		color: #FFFFFF;
		margin-bottom: 20rpx;
		position: absolute;
		right: 0;
		bottom: 10rpx;

	}

	.detail view {
		margin: 10rpx 40rpx;
		border-bottom: 1px solid #CCCCCC;
		position: relative;
	}

	.title_big {
		color: #FABD50;
		font-size: 32rpx;
		font-weight: 600;
		display: inline-block;
		padding: 0 12rpx;
	}

	.close {
		width: 80rpx;
	}

	.my-btn {
		height: 94rpx;
		margin-top: 80px;
		background-image: linear-gradient(90deg, #FAB53A 4%, #EFA21A 99%);
		box-shadow: 0 0 12px 0 rgba(250, 181, 58, 0.50);
		border-radius: 24px;
		ont-family: PingFangSC-Medium;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
	}
</style>
